<template>
  <!--轮播组件-->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in sliderList" @click="goJump(item)">
        <img :src="item.sliderImg | imgPathFilter" alt="" width="100%" height="130px">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Swiper from 'swiper';

  export default {
    name: '',
    props: {
      sliderList: {type: Array}
    },
    data() {
      return {};
    },
    methods: {
      goJump(slider) {
        console.log(slider);
        let jumpType = slider.jumpType;
        if (jumpType == 1) {
          let url = slider.content;
          window.location.href = this.$myUtils.convertHttpUrl(url);
        }
        if (jumpType == 2) {
          this.$router.push({path: 'slidercontent', query: {sliderinfo: JSON.stringify(slider)}})
        }
      }
    },
    created() {

    },
    mounted() {

    },
    updated() {
      new Swiper('.swiper-container', {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        autoplay: true
      })
    },
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  .swiper-slide img {
    object-fit: cover;
  }

  .swiper-pagination-fraction {
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 25px;
    left: 80%;
    border-radius: 5px;
    color: #fff;
    width: 50px;
  }
</style>
